// 覆盖Element Plus的图片预览样式
.el-image-viewer__wrapper {
  // 设置预览遮罩层的背景色和透明度
  background-color: rgba(0, 0, 0, 0.8);

  .el-image-viewer__img {
    // 限制预览图片的最大尺寸
    max-width: 80vw !important;  // 宽度最大为视口宽度的80%
    max-height: 80vh !important; // 高度最大为视口高度的80%
    
    // 保持图片比例
    object-fit: contain;
  }

  .el-image-viewer__close {
    // 调整关闭按钮的样式
    color: #fff;
    font-size: 24px;
    opacity: 0.8;
    
    &:hover {
      opacity: 1;
    }
  }

  .el-image-viewer__actions {
    // 调整底部操作栏的样式
    opacity: 0.8;
    
    &:hover {
      opacity: 1;
    }
  }

  .el-image-viewer__prev, 
  .el-image-viewer__next {
    // 调整左右切换按钮的样式
    font-size: 24px;
    color: #fff;
    opacity: 0.8;
    
    &:hover {
      opacity: 1;
    }
  }

  .el-image-viewer__canvas {
    // 调整画布容器的样式
    display: flex;
    justify-content: center;
    align-items: center;
  }
} 